import { useState } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { Badge, TabBar, Swiper, Toast } from 'antd-mobile'
import './Foot.css'
import { AppOutline, MessageOutline, MessageFill, MovieOutline, UserOutline, LocationFill } from 'antd-mobile-icons';
let Foot = (props) => {
    let Navigate = useNavigate()
    const [tabs, setTabs] = useState([
        {
            key: '/Foot/Shou',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
            url: "/Foot/Shou"
        },
        {
            key: '/Foot/video',
            title: '视频',
            icon: <MovieOutline />,
            badge: '5',
            url: "/Foot/video"
        },
        {
            key: 'message',
            title: '消息',
            icon: (active) => active ? <MessageFill /> : <MessageOutline />,
            badge: '99+',
            url: "/Foot/message"
        },
        {
            key: '/Foot/in_Login',
            title: '我的',
            icon: <UserOutline />,
            url: "/Foot/in_Login"
        },
    ])
    return (
        <>
            <div className="dyx_boxs">
                <div className="dyx_mainaa">
                    <Outlet />
                </div>
                <div className="dyx_footer">
                    <TabBar onChange={(url) => {
                        Navigate(url)

                    }}>
                        {tabs.map(item => (
                            <TabBar.Item
                                key={item.key}
                                icon={item.icon}
                                title={item.title}
                                badge={item.badge}
                                url={item.url}
                            />))}
                    </TabBar>
                </div>
            </div>
        </>
    )
}

export default Foot;